<template>
  <div class="dtbox">
    <div class="dtbox-box02">
      <div class="top_bar">
        <div class="brm">
          <div class="brm-bord" v-for="(item, index) in xzPath" :key="index">
            <span class="el-icon-arrow-right" v-if="index > 0"></span>
            <div class="brm-item" @click="goback">
              <p class="brm-item-title">{{ item.title }}</p>
              <p class="brm-item-label">
                <span v-if="index < 2">
                  {{ item.label }}
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <mapbox
        class="dtbox-box02-map"
        v-model="chartID"
        v-if="chartID"
        :mapConfig="mapConfig"
        @getEchart="getEchart"
      />
    </div>

    <!-- S 装饰 -->
    <img
      class="dtbox-dec01-plate"
      src="@/assets/imgs/srdpBg/plate.png"
      alt=""
      srcset=""
    />
    <img
      class="dtbox-dec01-left"
      src="@/assets/imgs/srdpBg/border-left.png"
      alt=""
      srcset=""
    />
    <img
      class="dtbox-dec01-right"
      src="@/assets/imgs/srdpBg/border-right.png"
      alt=""
      srcset=""
    />

    <!-- E 装饰 -->
  </div>
</template>

<script>
import mapbox from "@/components/map";
export default {
  components: {
    mapbox,
  },
  data() {
    return {
      dateObj: {
        time: "",
        date: "",
        id: -1,
      },
      rowData: [],
      mapData: [],
      mapValmax: 100,
      mapBind: false, // 地图事件绑定
      chartID: this.$store.state.jsjfxyData.mapName,
      config: {
        number: [100000],
        content: "{nt}",
        style: {
          fill: "orange",
        },
      },
      xzPath: [
        {
          title: "中国",
          label: "china",
          mapObj: {
            id: "china",
            pid: "999",
            swjg_dm: "00000000000",
            swjg_jc: 1,
            alias: "China",
            name: "中国",
            geoPath: "100000.json",
            centerLon: "116.405285",
            centerLat: "39.904989",
          },
        },
      ],
      geoCoordMap: {
        成都市: [104.065735, 30.559462],
        自贡市: [104.773447, 29.252765],
        攀枝花市: [101.716007, 26.480446],
        泸州市: [105.443348, 28.789138],
        德阳市: [104.398651, 31.027991],
        绵阳市: [104.741722, 31.36402],
        广元市: [105.829757, 32.333668],
        遂宁市: [105.571331, 30.413311],
        内江市: [105.066138, 29.48708],
        乐山市: [103.761263, 29.482024],
        南充市: [106.082974, 30.695281],
        眉山市: [103.831788, 29.948318],
        宜宾市: [104.630825, 28.660189],
        广安市: [106.633369, 30.356398],
        达州市: [107.502262, 31.109484],
        雅安市: [103.001033, 29.887722],
        巴中市: [106.753669, 31.758809],
        资阳市: [104.641917, 30.022211],
        阿坝藏族羌族自治州: [102.221374, 31.799792],
        甘孜藏族自治州: [100.063815, 30.950663],
        凉山彝族自治州: [102.258746, 27.786762],
      },
    };
  },

  watch: {
    chartID(newID) {
      if (newID) {
        this.$store.dispatch("jsjfxyData/setMapName", newID);
      }
    },
    swjgData(newData, oldData) {
      if (newData.swjg_jc > oldData.swjg_jc && this.xzPath.length < 3) {
        // 下钻
        this.xzPath.push({
          title: newData.mapName,
          label: newData.mapAlias,
          mapObj: newData,
        });
      }
      if (newData.swjg_jc < oldData.swjg_jc) {
        // 后退
        this.xzPath.pop();
      }

      // 变更后获取新的上级税务机关
      if (this.xzPath.length > 1) {
        let obj = this.xzPath[this.xzPath.length - 2];
        this.$store.dispatch("jsjfxyData/setPswjg", {
          pswjg_dm: obj.mapObj.swjg_dm,
          pswjg_jc: obj.mapObj.swjg_jc,
        });
      } else {
        this.$store.dispatch("jsjfxyData/setPswjg", {
          pswjg_dm: "99999999999",
          pswjg_jc: 0,
        });
      }
    },
    condSwjgData() {
      this.init();
    },
  },

  mounted() {
    this.init();
    this.task();
    this.timmer();
  },

  computed: {
    swjgData() {
      let name = this.$store.state.jsjfxyData.mapName;
      return {
        mapName: name,
        mapAlias: this.$store.state.jsjfxyData.mapAlias,
        swjg_dm: this.$store.state.jsjfxyData.swjg_dm,
        swjg_jc: this.$store.state.jsjfxyData.swjg_jc,
      };
    },
    condData() {
      let name = this.$store.state.jsjfxyData.mapName;
      return {
        mapName: name,
        mapAlias: this.$store.state.jsjfxyData.mapAlias,
        swjg_dm: this.$store.state.jsjfxyData.swjg_dm,
        swjg_jc: this.$store.state.jsjfxyData.swjg_jc,
        zcName: this.$store.state.jsjfxyData.zcName,
        zcType: this.$store.state.jsjfxyData.zcType,
        ssyf_by: this.$store.state.jsjfxyData.ssyf_by,
        ssyf_sy: this.$store.state.jsjfxyData.ssyf_sy,
        pswjg_dm: this.$store.state.jsjfxyData.pswjg_dm,
      };
    },
    condSwjgData() {
      return {
        swjg_dm: this.$store.state.jsjfxyData.swjg_dm,
        swjg_jc: this.$store.state.jsjfxyData.swjg_jc,
        zcName: this.$store.state.jsjfxyData.zcName,
        zcType: this.$store.state.jsjfxyData.zcType,
      };
    },
    mapConfig() {
      let _this = this;
      let dataList = this.mapData.filter((item) => item.SWJG_MC != "");
      let zcName = "收入";

      let symbolPath =
        "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z";

      // 热力值数据
      let dataMap = [];
      let max = this.mapValmax * 1.1;

      return {
        option: {
          tooltip: {
            show: true,
          },
          visualMap: {
            // 热力图
            show: false,
            min: 0,
            max: max,
            left: "left",
            top: "bottom",
            text: ["高", "低"], // 文本，默认为数值文本
            inRange: {
              color: [
                "#135bff",
                "#124be7",
                "#0b3bbf",
                "#0d329a",
                "#0c2c84",
                "#092269",
              ],
            },
            textStyle: {
              color: "#ffffff",
            },
          },
          geo: {
            map: this.chartID,
            label: {
              show: true,
              color: "#FFFFFF",
              fontSize: 14,
              emphasis: {
                show: false,
                color: "#fff",
              },
            },
            roam: false,
            //   放大我们的地图
            zoom: 1.2,
            layoutCenter: ["45%", "50.8%"],
            // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            // layoutSize: 800,
            itemStyle: {
              normal: {
                areaColor: "#06285f",
                borderColor: "#0d96f1",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#0d96f1",
              },
            },
            tooltip: {
              trigger: "item",
              backgroundColor: "transparent",
              borderWidth: 0,
              formatter: function (params, ticket, callback) {
                // console.log(params);
                try {
                  // 保留一位小数
                  let val = _this.digtalFormatUnit(
                    Number(params.data.value),
                    "",
                    false,
                    true
                  );
                  let num = Number(val.value).toFixed(1);
                  num = _this.digtalFormatUnit(Number(num), " ", true);
                  let unit = val.unit;

                  let str = `<div class="selfToolTips">
                      <h3>${params.name}</h3>
                      <p>
                        <span class="selfToolTips-name">${zcName}金额：</span>
                        <span class="selfToolTips-value">${num}${unit} </span>
                      </p>
                      
                    </div>`;
                  return str;
                } catch (e) {
                  //console.log(e);
                }
              },
            },
            z: 1,
          },
          series: [
            {
              // name: "四川地图",
              type: "map",
              mapType: this.chartID,
              geoIndex: 0,
              data: dataList,
            },
          ],
        },
      };
    },

    sql() {
      // 政策
      let zc = "0000000000";
      if (this.condData.zcType != "") {
        // 替换#号，用于拼接sql中的in()
        zc = this.condData.zcType.replace(/\#/g, "','");
      }
      // 所属月份
      let ssyf_by = this.condData.ssyf_by;
      let ssyf_sy = this.condData.ssyf_sy;

      // 上级税务代码
      let pswjg_dm = this.condData.pswjg_dm;
      // 税务代码
      let swjg_dm = this.condData.swjg_dm;

      // 根据条件，拼接自己需要的 sql
      let sql = "";
      // 查询省局数据
      if (this.condData.swjg_jc == 1) {
        sql = `SELECT 
               sum(t.jmse_1100) as "北京",
               sum(t.jmse_1200) as "天津",
               sum(t.jmse_1300) as "河北",
               sum(t.jmse_1400) as "山西",
               sum(t.jmse_1500) as "内蒙古",
               sum(t.jmse_2100) as "辽宁",
               sum(t.jmse_2102) as "大连",
               sum(t.jmse_2200) as "吉林",
               sum(t.jmse_2300) as "黑龙江",
               sum(t.jmse_3100) as "上海",
               sum(t.jmse_3200) as "江苏",
               sum(t.jmse_3300) as "浙江",
               sum(t.jmse_3302) as "宁波",
               sum(t.jmse_3400) as "安徽",
               sum(t.jmse_3500) as "福建",
               sum(t.jmse_3502) as "厦门",
               sum(t.jmse_3600) as "江西",
               sum(t.jmse_3700) as "山东",
               sum(t.jmse_3702) as "青岛",
               sum(t.jmse_4100) as "河南",
               sum(t.jmse_4200) as "湖北",
               sum(t.jmse_4300) as "湖南",
               sum(t.jmse_4400) as "广东",
               sum(t.jmse_4403) as "深圳",
               sum(t.jmse_4500) as "广西",
               sum(t.jmse_4600) as "海南",
               sum(t.jmse_5000) as "重庆",
               sum(t.jmse_5100) as "四川",
               sum(t.jmse_5200) as "贵州",
               sum(t.jmse_5300) as "云南",
               sum(t.jmse_5400) as "西藏",
               sum(t.jmse_6100) as "陕西",
               sum(t.jmse_6200) as "甘肃",
               sum(t.jmse_6300) as "青海",
               sum(t.jmse_6400) as "宁夏",
               sum(t.jmse_6500) as "新疆"
          FROM ${this.$store.state.schema}.v_jsjf_sg_2022_xzzc_zj_fdq t
           where  t.ssyf = '${ssyf_by}'
           and t.bbxmmx_dm IN ('${zc}')
           and t.sj_swjg_dm = '00000000000'`;
      } else {
        sql = ` SELECT 
               t.swjg_dm,
               t.swjg_jc,
               sum(nvl(t.jmse,0)) jmse
          FROM ${this.$store.state.schema}.dm2_dpzs_xzzc_sj_fdq t
         WHERE t.ssyf = '${ssyf_by}'
           AND t.bbxmmx_dm IN ('${zc}')
           and t.sj_swjg_dm = '${swjg_dm}'
        GROUP  by  t.swjg_dm,t.swjg_jc order by t.swjg_dm `;
      }
      // console.log("---dt---");
      // console.log(sql);
      // console.log("---dt---");

      return sql;
    },
  },

  methods: {
    task() {
      setInterval(() => {
        this.config = {
          number: [this.config.number[0] + 100],
          content: "{nt}",
          style: {
            fill: "rgb(48, 209, 235)",
          },
        };
      }, 6000);
    },
    getEchart(chart) {
      let _this = this;
      // console.log(chart);
      if (!this.mapBind) {
        this.mapBind = true;
        chart.on("dblclick", function (e) {
          // console.log(e);
          // _this.chartID = "四川省";
          // console.log(_this.rowData[e.dataIndex]);
          let chartID = "";
          if (_this.condData.swjg_jc == 1) {
            chartID = _this.$store.getters.getChartID2Name(e.name);
          } else {
            if (_this.rowData[e.dataIndex]) {
              chartID = _this.$store.getters.getChartID2SWJG(
                _this.rowData[e.dataIndex].SWJG_DM
              );
            } else {
              console.log(`${e.name} 无数据，无法下钻`);
            }
          }
          if (chartID) {
            _this.chartID = chartID;
          }
          // console.log(chartID);
        });
      }
    },
    goback() {
      // 地图后退
      if (this.xzPath.length === 3) {
        this.chartID = this.xzPath[1].mapObj.swjg_dm;
      }
      if (this.xzPath.length === 2) {
        this.chartID = "china";
      }
    },

    init() {
      this.getData();
    },
    getData() {
      // 查询图表数据
      this.ajax({
        sql: this.sql,
        sqlTip: "中间-地图",
      }).then((res) => {
        this.rowData = res;
        if (res.length > 0) {
          // 查询省局数据
          // 地图数据
          let mapData = [];
          // 最大值
          let mapValmax = 0;

          if (this.condData.swjg_jc == 1) {
            // 省局只有一条数据，只取第一条
            let row = res[0];
            let keyArr = Object.keys(row);

            keyArr.forEach((item, idx) => {
              let data = {};
              data.name = item;
              data.value = row[item] || 0;
              // 顺便取最大值
              if (data.value > mapValmax) {
                mapValmax = data.value;
              }

              mapData.push(data);
            });
          } else {
            // 各省局单位下属的地市、区县数据，地市下属的区县数据
            if (res.length > 0) {
              mapData = res.map((item) => {
                // 取最大值
                if (item.JMSE > mapValmax) {
                  mapValmax = item.JMSE;
                }
                // 取地图上对应的名称
                let name = "";

                let storeMap = this.$store.state.mapData.mapData;

                for (let k in storeMap) {
                  let mapObj = storeMap[k];
                  if (mapObj.swjg_dm == item.SWJG_DM) {
                    name = mapObj.name;
                  }
                }
                return {
                  name: name,
                  value: item.JMSE,
                };
              });
            }
          }

          this.mapData = mapData;
          this.mapValmax = mapValmax;
          //console.log(mapData);
        }
      });

      //console.log(this.rowData);
    },

    // 定时刷新顶部时间显示
    timmer() {
      clearInterval(this.dateObj.id);
      const dateTime = () => {
        let date = new Date();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let h = date.getHours();
        let m = date.getMinutes();

        this.dateObj.time = `${h}时${m}分`;
        this.dateObj.date = `${month}月${day}日`;
      };

      dateTime();
      this.dateObj.id = setInterval(() => {
        dateTime();
      }, 5 * 1000);
    },
    // 切换收入类型
    onChangesr(type) {
      this.$store.dispatch("sgData/setTitle", type);
    },
  },
  beforeDestroy() {
    clearInterval(this.dateObj.id);
  },
};
</script>

<style lang="scss" scoped>
label {
  font-size: 26px;
  color: #fff;
}
i {
  font-size: 30px;
  color: orange;
}
.brm {
  display: flex;
  color: #fff;
  &-bord {
    border-top: 3px solid #005d86;
    border-bottom: 3px solid #005d86;
    display: flex;
    align-items: center;
  }
  .el-icon-arrow-right {
    font-size: 54px;
  }
  &-item {
    display: inline-block;
    padding: 10px;

    &-title {
      font-size: 22px;
    }
    &-label {
      font-size: 14px;
    }
  }
}

.dtbox-dec01 {
  &-plate {
    position: absolute;
    left: 3%;
    bottom: -5%;
    width: 80%;
    z-index: 0;
  }
  &-left {
    position: absolute;
    left: 2%;
    top: 30%;
    z-index: 0;
  }
  &-right {
    position: absolute;
    right: 20%;
    top: 30%;
    z-index: 0;
  }
}

.top_bar {
  position: absolute;
  cursor: pointer;
  top: 0;
  width: calc(100% - 160px);
  padding: 0 80px;
  z-index: 3;
}
.dtbox {
  position: relative;
  width: 100%;
  height: 100%;
  color: #fff;
  &-box01 {
    display: flex;
    height: calc(20%);
    &-item {
      background: url("../../../../../assets/imgs/srdpBg/bg02.png") center
        center no-repeat;
      background-size: 100% 100%;
      margin: 0 20px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-around;
      &-top {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-around;
      }
      .title-p {
        text-align: left;
        padding-left: 22px;
      }
      .info-p {
        display: flex;
        //justify-content: left;
        &-value {
          padding-left: 22px;
        }
        &-unit {
          margin-left: 5px;
        }
      }
    }
    .left {
      flex: 1.3;
    }
    .center {
      flex: 1.3;
    }
    .right {
      flex: 2;
      display: flex;
      flex-direction: row;
      &-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-around;
        margin: 0 20px;
        img {
          margin-left: 5px;
        }
      }
    }
  }
  .blue {
    color: rgb(48, 209, 235);
  }
  .green {
    color: rgb(35, 211, 152);
  }
  .yellow {
    color: rgb(242, 218, 56);
  }
  .red {
    color: rgb(241, 49, 57);
  }
  &-box02 {
    position: absolute;
    height: calc(90%);
    width: 70%;
    left: 5%;
    top: 10%;
    &-map {
      position: absolute;
      z-index: 2;
      height: calc(96%);
      //background-color: blue;
    }
    &-tip {
      position: absolute;
      top: -40px;
      left: 80px;
      font-size: 24px;
      color: aqua;
      .val {
        color: orange;
      }
    }
  }
}

.dtbox-box01-top {
  position: absolute;
  left: 20%;
  top: 0;
  flex-direction: row;
  width: 80%;
  text-align: left;
  > p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
}

.dtbox-box01-item.right {
  position: absolute;
  right: 20px;
  top: 40%;
  cursor: pointer;
}
.right-item {
  margin-top: 20px;
}
</style>
